<template>
  <div id="prompt">
    <promptTitle>
      <div class="Title"><span>{{ Msg["title"] }}</span></div>
      <div class="Msg" @click="msgHeight()">
        <svg-icon :iconClass="downFlag?'xia':'shang'" className="svg-icon"></svg-icon>
        <span>提示</span>
      </div>
    </promptTitle>
    <promptCont ref="Height" class="down">
      <div class="promptMsg">操作提示</div>
      <p v-for="(item,index) in Msg['promptMsg']" :key="index">{{ index + 1 }}.{{ item }}</p>
    </promptCont>
  </div>
</template>

<script>
import promptTitle from "@/components/promptMsg/title";
import promptCont from "@/components/promptMsg/msg"

export default {
  name: "promptMsg",
  data() {
    return {
      downFlag: true,
      h: '0px'
    }
  },
  components: {
    promptTitle,
    promptCont
  },
  computed: {},
  mounted() {
    let h = this.$refs.Height.$el.offsetHeight + "px";
    this.h = h;
    this.$refs.Height.$el.style.height = this.h;
  },
  methods: {
    msgHeight() {
      this.downFlag = !this.downFlag;
      if (this.downFlag) {
        this.$refs.Height.$el.style.opacity = 1;
        this.$refs.Height.$el.style.height = this.h;
      } else {
        this.$refs.Height.$el.style.height = 0 + 'px';
        this.$refs.Height.$el.style.opacity = 0;
      }
    }
  },
  props: {
    Msg: {
      required: true,
      type: Object,
      default: {}
    }
  },
  watch: {
    Msg: {
      handler(n) {
        console.log(n)
      },
      immediate: true
    }
  }

}
</script>

<style scoped lang="scss">
#prompt {
  width: 100%;
}

.down {
  transition: all 0.2s ease;
}

</style>